<%--
   - date-picker
   - 
   - Displays an input box with date picker and a clear button.
   -
   - @param dateField - the date field
   - @param timeField - the time field
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>

<%@ attribute name="dateField" required="true" type="java.lang.String"%>
<%@ attribute name="timeField" required="false" type="java.lang.String"%>
<%@ attribute name="onchange" required="false" type="java.lang.String"%>

<div class="L">
	<form:input path="${dateField}" id="${dateField}" class="num-date" onchange="${onchange}" cssErrorClass="highlight-error num-date"/>
    <button onClick="javascript: document.getElementById('${dateField}').value='';" title="Cancel" class="iconz">Delete</button>
    <c:if test="${not empty timeField}">
    	<form:input path="${timeField}" cssClass="num-time" onblur="magicTime(this)" cssErrorClass="num-time highlight-error"/>
    </c:if>
    <a id="focus-${dateField}"></a>
</div>	

<script type="text/javascript">

$(function() {
	var fieldId = "${dateField}";
	$( "input[id='" + fieldId + "']" ).datepicker({
		showOn: "both",
		buttonImage : '${url_context}<spring:theme code="datepicker"/>',
		buttonImageOnly : true,
		minDate: new Date(1901, 1 - 1, 1),
		maxDate: "+50y",
		yearRange: "1901:+5", /*range is currently selected year-45 to current year+5*/
		buttonText: "Choose",
		changeMonth : true,
		changeYear : true,
		dateFormat: 'mm/dd/yy',
		constrainInput: true
	});
});

</script>